<template>
	<view class="create-order" :class="['qn-page-' + theme]">
		<block v-if="cart_data.lists.length">
			<view class="confirm_box">
				<view class="address-bg primary-bg"></view>
				<view class="main-view-box" style="background-color: #FFFFFF;">
					<view class="delivery-ul">
						<view
							class="delivery-li primary-t-bg"
							@click="deliveryChange(item)"
							v-for="(item, index) in delivery"
							:key="index"
							:class="[deliveryType === item.id ? 'delivery-on' : '']"
						>
							<text>{{ item.title }}</text>
							<view class="check-bg">{{ item.title }}</view>
						</view>
					</view>
					<view @click="goPage('/pages/address/index?source=1')" class="address-section " v-if="deliveryType === 1">
						<view class="order-content">
							<view class="ibonfont ibonicon-test icon-address primary-bg"></view>
							<view v-if="addressData.id" class="cen">
								<view class="top">
									<text class="name">{{ addressData.relName }}</text>
									<text class="mobile">{{ addressData.mobile }}</text>
								</view>
								<text class="address">
									{{ addressData.area.provinceName }}{{ addressData.area.cityName }}{{ addressData.area.districtName }}{{ addressData.address }}
								</text>
							</view>
							<text v-if="addressData.id" class="ibonfont ibonjinru"></text>
							<view v-else class="empty-tips primary-color">
								<u-icon name="plus" margin-right="10"></u-icon>
								去添加收货地址
							</view>
						</view>
					</view>
					<view class="address-section " v-else>
						<view class="order-content" @click="openShopPop">
							<text class="ibonfont ibonmendian icon-address primary-bg"></text>
							<view v-if="selfRuleId" class="cen">
								<view class="top">
									<text class="name">{{ self_express_rule.name }}</text>
									<text class="mobile">{{ self_express_rule.mobile }}</text>
								</view>
								<view class="address">
									<text class="name" v-if="self_express_rule.startTime && self_express_rule.endTime">
										营业时间:{{ self_express_rule.startTime }}-{{ self_express_rule.endTime }}
									</text>
									<text class="name" v-else>营业时间：全天</text>
									<text class="mobile">{{ self_express_rule.day.join(',') }}</text>
								</view>
								<text class="address">
									{{ self_express_rule.provinceName }}{{ self_express_rule.cityName }}{{ self_express_rule.districtName }}{{ self_express_rule.address }}
								</text>
							</view>
							<text v-if="selfRuleId" class="ibonfont ibonjinru"></text>
							<view class="empty-tips primary-color" margin-right="10" v-else>
								<u-icon name="plus"></u-icon>
								<text>选择自提点</text>
							</view>
						</view>
						<!-- <image
						class="a-bg"
						src=""
					></image> -->
					</view>
				</view>
			</view>
			<view class="goods-view model-view">
				<view class="goods-li clearfix" v-for="(item, index) in cart_data.lists" :key="index">
					<view class="goods-img float_left"><u-image border-radius="10rpx" width="124rpx" height="124rpx" :src="item.images"></u-image></view>
					<view class="goods-info float_left">
						<view class="goods-name ellipsis">
							<view class="activity-tag" v-if="item.activityId"><text class="ibonfont ibonshangxiangxianshimiaosha"></text></view>
							{{ item.title }}
						</view>
						<view class="goods-sku">
							<text v-for="(items, indexs) in item.specGroup" :key="indexs">{{ items.specValueName }};</text>
						</view>
						<view class="price-num clearfix">
							<view class="float_left now-price">
								¥
								<text class="pn-text" v-if="item.activityId">{{ item.activity.activityPrice }}</text>
								<text class="pn-text" v-else>{{ item.salePrice }}</text>
							</view>
							<view class="float_right goods-num" v-if="!goods_data.goodsId">
								<u-icon name="close" size="18"></u-icon>
								<text class="pn-text">{{ item.buyNum }}</text>
							</view>
							<view class="float_right goods-num" v-else>
								<u-number-box
									:min="1"
									:max="item.inventory"
									v-model="item.buyNum"
									:input-height="44"
									@plus="valChange"
									@minus="valChange"
									@blur="valBlur"
								></u-number-box>
							</view>
						</view>
					</view>
				</view>
				<view class="remarks">
					<text class="remarks-label">买家留言</text>
					<input type="text" placeholder="留言前建议先与商家协调一致" v-model="remarks" />
				</view>
			</view>
			<view class="model-view coupon-box clearfix" @click="openCouponPop" v-if="coupon_list.length">
				<view class="float_left model-label">
					<text class="icon-tag">券</text>
					<text>优惠券</text>
				</view>
				<view class="float_right">
					<text class="price-num" v-if="coupon_price">- ¥{{ coupon_price }}</text>
					<text class="no-sel" v-else>请选择</text>
					<text class="ibonfont ibonjinru"></text>
				</view>
			</view>
			<view class="model-view price-box">
				<view class="price-li clearfix">
					<text class="float_left model-label">商品金额</text>
					<text class="float_right model-val">¥{{ cart_data.totalMoney || 0 }}</text>
				</view>
				<view class="price-li clearfix">
					<text class="float_left model-label">优惠金额</text>
					<text class="float_right model-val price-num now-price">- ¥{{ cart_data.preferentialMoney }}</text>
				</view>
				<view class="price-li clearfix">
					<text class="float_left model-label">运费</text>
					<text class="float_right model-val price-num now-price">¥{{ cart_data.expressMoney || 0 }}</text>
				</view>
			</view>
			<view class="footer-view clearfix">
				<view class="float_left">
					实付
					<text class="rmb-icon">¥</text>
					<text class="price-num total-price">{{ cart_data.payMoney || 0 }}</text>
				</view>
				<view class="sub-btn float_right primary-btn" @click="subOrder">提交订单</view>
			</view>
			<u-popup mode="bottom" v-model="pay_show">
				<view class="pay-pop-view">
					<view class="pay-sel-title clearfix">
						<text class="float_left">付款方式</text>
						<text class="float_right ibonfont ibonguanbi" @click="closePayPop"></text>
					</view>
					<view class="pay-ul">
						<view class="pay-li" v-for="(item, index) in payment" :key="index" @click="paymentChange(item)">
							<text class="ibonfont ibonweixinzhifu" v-if="item.title.indexOf('微信') !== -1"></text>
							<text class="ibonfont ibonumidd17" v-else-if="item.title.indexOf('支付宝') !== -1"></text>
							<text class="ibonfont ibonhuodaofukuan" v-else></text>
							<view class="pay-name clearfix">
								<text class="float_left">{{ item.title }}</text>
								<text class="float_right ibonfont " :class="[payType === item.id ? 'ibonxuanze' : 'ibonweixuanze']"></text>
							</view>
						</view>
					</view>
					<view class="pay-btn primary-btn" @click="submit">确定</view>
				</view>
			</u-popup>
			<!-- 自提店 -->
			<u-popup mode="bottom" v-model="self_show">
				<view class="self-shop-pop">
					<view class="self-shop-title clearfix">
						<text class="float_left">自提点</text>
						<text class="float_right ibonfont ibonguanbi" @click="closeShopPop"></text>
					</view>
					<view class="self-shop-ul">
						<view class="self-shop-li" v-for="(item, index) in self_shop" :key="index" @click="changeSelShop(item)">
							<text class="ibonfont ibonmendian icon-address primary-bg"></text>
							<view class="name">{{ item.setData.name }} {{ item.setData.mobile }}</view>
							<view>
								营业时间：
								<text v-if="item.setData.startTime && item.setData.endTime">{{ item.setData.startTime }}-{{ item.setData.endTime }}</text>
								<text v-else>全天</text>
								<text style="padding-left: 10upx;">{{ item.setData.day.join(',') }}</text>
							</view>
							<view>{{ item.setData.provinceName }}{{ item.setData.cityName }}{{ item.setData.districtName }}{{ item.setData.address }}</view>
							<text class="ibonfont sel-tag" :class="[selfRuleId === item.id ? 'ibonxuanze' : 'ibonweixuanze']"></text>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 优惠券 -->
			<u-popup mode="bottom" v-model="coupon_pop">
				<view class="self-shop-pop self-coupon-pop">
					<view class="self-shop-title clearfix">
						<text class="float_left">可用优惠券</text>
						<text class="float_right cancel-coupon" @click="closeCouponPop">不使用优惠券</text>
					</view>
					<scroll-view scroll-y class="self-coupon-ul">
						<!-- 优惠券页面-->
						<view class="coupon-item" v-for="(item, index) in coupon_list" :key="index" @click="selCoupon(item)">
							<view class="con">
								<view class="left">
									<text class="title">{{ item.name }}</text>
									<text class="time">有效期至{{ $u.timeFormat(item.endTime) }}</text>
								</view>
								<view class="right">
									<text class="price">{{ item.reducePrice }}</text>
									<text v-if="item.minPrice === '不限金额' || Number(item.minPrice) === 0">无使用门槛</text>
									<text v-else>满{{ item.minPrice }}元可用</text>
								</view>

								<view class="circle l"></view>
								<view class="circle r"></view>
							</view>
							<text class="tips">
								{{ item.applyRange === 10 ? '全场通用' : item.applyRange === 20 ? '指定分类商品可用' : item.applyRange === 30 ? '指定品牌商品可用' : '' }}
							</text>
						</view>
					</scroll-view>
				</view>
			</u-popup>
		</block>
	</view>
</template>

<script>
export default {
	data() {
		return {
			cart_data: {
				lists: []
			}, //
			self_show: false,
			coupon_pop: false, //优惠券弹窗
			coupon_price: '',
			self_shop: [], // 自提点列表
			pay_show: false, // 选择支付方式
			remarks: '',
			self_express_rule: {
				day: []
			}, // 自提点数据
			coupon_list: [], // 优惠券列表
			couponId: 0,
			deliveryType: 0,
			payType: 0,
			selfRuleId: 0,
			payment: [],
			addressData: {},
			delivery: [
				{
					id: 1,
					title: '快递配送'
				},
				{
					id: 2,
					title: '上门自提'
				}
			],
			goods_data: {}, // 立即购买
			tmplId: [] // 消息模版ID
		};
	},
	onPullDownRefresh() {
		this.confirmData();
	},
	onLoad(options) {
		// 支付方式
		this.getPayType();
		// 配送方式
		this.getDelivery();
		// 地址
		this.addressList();
		// 确认订单数据
		if (options.goodsId) {
			// 立即购买
			this.goods_data = options;
			this.buyNow();
		} else {
			this.confirmCart();
		}
		// 消息模版ID
		this.getTemplateMessageId();
		// 根据主题设置顶部颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.theme === 'red' ? '#fe4543' : this.primaryColor
		});
	},
	onHide() {},
	methods: {
		// 检查是否是立即购买
		confirmData() {
			if (this.goods_data.goodsId) {
				this.buyNow();
			} else {
				this.confirmCart();
			}
		},
		// 立即购买
		buyNow() {
			this.$u.api
				.buyNow({
					deliveryType: this.deliveryType,
					couponId: this.couponId,
					addressId: this.addressData.id,
					goodsId: this.goods_data.goodsId,
					buyNum: this.goods_data.buyNum,
					skuId: this.goods_data.skuId,
					activityId: this.goods_data.activityId
				})
				.then(({ data }) => {
					uni.stopPullDownRefresh();
					this.cart_data = data;
					this.coupon_list = data.couponLists;
					this.deliveryType = data.deliveryType;
					this.payType = data.payType;
					this.selfRuleId = data.selfRuleId;
				});
		},
		// 获取确认订单数据
		confirmCart() {
			this.$u.api
				.confirmCart({
					deliveryType: this.deliveryType,
					couponId: this.couponId,
					addressId: this.addressData.id
				})
				.then(({ data }) => {
					uni.stopPullDownRefresh();
					this.cart_data = data;
					this.coupon_list = data.couponLists;
					this.deliveryType = data.deliveryType;
					this.payType = data.payType;
					this.selfRuleId = data.selfRuleId;
				});
		},
		// 切换付款方式
		paymentChange(item) {
			this.payType = item.id;
		},
		// 切换配送方式
		deliveryChange(item) {
			this.deliveryType = item.id;
			this.delivery_title = item.title;
			this.confirmData();
		},
		// 关闭付款方式弹窗
		closePayPop() {
			this.pay_show = false;
		},
		// 获取支付方式
		getPayType() {
			this.$u.api.getPayType().then(({ data }) => {
				// #ifdef MP-WEIXIN
				// 微信小程序过滤支付方式，把支付宝排除
				this.payment = data.filter(item => item.title.indexOf('支付宝') === -1);
				// #endif
				// #ifdef APP-PLUS
				this.payment = data;
				// #endif
			});
		},
		// 获取配送方式
		getDelivery() {
			this.$u.api.getDelivery().then(({ data }) => {
				this.delivery = data;
				const selfObj = data.find(item => item.title.indexOf('自提') > -1) || {};
				if (selfObj.lists && selfObj.lists.length) {
					// this.self_express_rule = selfObj.lists[0].setData;
					this.self_shop = selfObj.lists;
				}
			});
		},
		// 选择优惠券
		selCoupon(row) {
			this.couponId = row.id;
			this.coupon_price = row.reducePrice;
			this.confirmData();
			this.coupon_pop = false;
		},
		// 提交订单
		submit() {
			this.closePayPop();
			if (this.tmplId.length) {
				uni.requestSubscribeMessage({
					tmplIds: this.tmplId,
					success: res => {
						this.createOrder();
					}
				});
			} else {
				this.createOrder();
			}
		},
		// 请求创建订单
		createOrder() {
			this.$u.api
				.createOrder({
					...this.cart_data,
					couponId: this.couponId,
					address: this.addressData,
					addressId: this.addressData.id,
					payType: this.payType,
					deliveryType: this.deliveryType,
					remark: this.remarks,
					selfRuleId: this.selfRuleId
				})
				.then(({ data }) => {
					if (this.payType === 1) {
						// 微信小程序，微信支付
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: res => {
								this.$u.toast('支付成功');
								this.goPage('/pages/order/index', 'redirectTo');
							},
							fail: err => {
								this.$u.toast('支付失败');
								this.goPage('/pages/order/index', 'redirectTo');
							}
						});
					} else {
						this.goPage('/pages/order/index', 'redirectTo');
					}
				});
		},
		// 获取收货地址
		addressList() {
			this.$u.api
				.addressList({
					page: 1,
					pageSize: 10
				})
				.then(({ data }) => {
					if (data.length) {
						const defaultObj = data.find(item => item.defaultStatus === 5) || data[0];
						this.addressData = defaultObj;
					}
				});
		},
		//提交订单 打开选择支付方式接口
		subOrder() {
			this.pay_show = true;
		},
		// 确定选择自提点
		changeSelShop(row) {
			this.selfRuleId = row.id;
			this.self_express_rule = row.setData;
			this.closeShopPop();
		},
		//关闭自提点弹窗
		closeShopPop() {
			this.self_show = false;
		},
		// 打开自提点弹窗
		openShopPop() {
			this.self_show = true;
		},
		// 关闭优惠券选择弹窗
		closeCouponPop() {
			this.couponId = 0;
			this.coupon_price = 0;
			this.confirmData();
			this.coupon_pop = false;
		},
		// 打开优惠券选择弹窗
		openCouponPop() {
			this.coupon_pop = true;
		},
		valChange(e) {
			this.goods_data.buyNum = e.value;
			this.confirmData();
		},
		valBlur(e) {
			this.goods_data.buyNum = e.value;
			this.confirmData();
		},
		// 获取消息模版ID
		getTemplateMessageId() {
			this.$u.api
				.getTemplateMessageId({
					id: [3, 2]
				})
				.then(res => {
					if (res.data.length) {
						this.tmplId = res.data.map(item => {
							return item.tmplId;
						});
					}
				});
		}
	}
};
</script>

<style lang="scss">
.confirm_box {
	width: 100%;
	padding: 20upx 20upx 0;
	min-height: 100%;
	position: relative;
	.main-view-box {
		border-radius: 10upx;
	}
	.address-bg {
		position: absolute;
		background-color: #fe4543;
		top: 0;
		left: 0;
		width: 100%;
		height: 180upx;
	}
	.delivery-ul {
		display: flex;
		margin-top: 30upx;
		line-height: 70upx;
		height: 70upx;
		.delivery-li {
			font-size: 28upx;
			background: #ff7d7d;
			color: #ffffff;
			text-align: center;
			flex: 3;
			position: relative;
			.check-bg {
				display: none;
				position: absolute;
				top: -10upx;
				height: 80upx;
				background-color: #fff;
				width: 100%;
				background: linear-gradient(243deg, transparent 36upx, #ffffff 0);
			}
			&:first-child {
				border-top-left-radius: 10rpx;
			}
			&:last-child {
				border-top-right-radius: 10rpx;
			}
		}
		.delivery-li:first-child .check-bg {
			border-top-left-radius: 10rpx;
		}
		.delivery-li:nth-child(2) .check-bg {
			background: linear-gradient(110deg, transparent 30upx, #ffffff 0) top left, linear-gradient(-110deg, transparent 30upx, #ffffff 0) top right;
			background-size: 60% 100%;
			background-repeat: no-repeat;
		}
		.delivery-li:last-child .check-bg {
			background: linear-gradient(113deg, transparent 32upx, #ffffff 0);
			border-top-right-radius: 10rpx;
		}
		.delivery-on {
			color: #333333;
			.check-bg {
				display: block;
			}
		}
	}
	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;
		border-radius: 0 0 10upx 10upx;
		.empty-tips {
			color: $uni-color-primary;
		}
		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-address {
			display: inline-block;
			margin-left: 20upx;
			margin-right: 20upx;
			width: 60upx;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			border-radius: 100%;
			font-size: 32upx;
			color: #ffffff;
			background-color: #fe4543;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.mobile,
		.name {
			font-size: 26upx;
			margin-right: 20upx;
		}

		.address {
			margin-top: 10upx;
			margin-right: 20upx;
			font-size: 24upx;
			color: $font-color-light;
			.mobile,
			.name {
				font-size: 24upx;
			}
		}

		.ibonjinru {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}
}
.goods-view {
	.remarks {
		padding: 30upx 0;
		.remarks-label {
			font-size: 24upx;
		}
		input {
			width: 540upx;
			font-size: 24upx;
			display: inline-block;
			vertical-align: middle;
			margin-left: 20upx;
			text-align: right;
		}
	}
	.goods-li {
		padding: 30upx 0;
		border-bottom: 1upx solid #f4f4f4;
		.goods-img {
			padding-right: 20upx;
		}
		.goods-info {
			width: 520upx;
			font-size: 28upx;
			.goods-name {
				.activity-tag {
					color: #fff;
					display: inline-block;
					padding: 0 6upx;
					border-radius: 6rpx;
					background: linear-gradient(to right, #ff3859, #ff2d2e);
					.ibonfont {
						font-size: 22rpx;
					}
					margin-right: 10upx;
					line-height: 26rpx;
				}
			}
			.goods-sku {
				font-size: 22upx;
				padding: 10upx 0;
				color: #999999;
			}
			.price-num {
				font-size: 28upx;
				.pn-text {
					font-weight: 600;
				}
				.goods-num {
					color: #333333;
					.u-number-input {
						background-color: #ffffff !important;
					}
					.u-icon-plus {
						border-radius: 8rpx !important;
						width: 44rpx !important;
						font-size: 24rpx;
					}
					.u-icon-disabled {
						border-radius: 8rpx !important;
						width: 44rpx !important;
						font-size: 24rpx;
					}
					.u-icon-minus {
						border-radius: 8rpx !important;
						width: 44rpx !important;
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
.model-view {
	background-color: #ffffff;
	width: 706upx;
	margin: 20upx auto 0;
	border-radius: 10upx;
	padding: 0 20upx;
	.model-val {
		font-size: 28upx;
	}
	.model-label {
		font-size: 26upx;
	}
	.ibonjinru {
		font-size: 24upx;
		color: #999999;
		margin-left: 10upx;
	}
}
.coupon-box {
	padding: 30upx 20upx;
	.no-sel {
		font-size: 24upx;
		color: #999999;
		font-weight: 400;
	}
	.model-label {
		.icon-tag {
			font-size: 18upx;
			color: #ffffff;
			background-color: #fe4543;
			display: inline-block;
			width: 26upx;
			line-height: 26upx;
			text-align: center;
			margin-right: 10upx;
			vertical-align: middle;
		}
	}
}

.price-num {
	color: $price-color;
	font-size: 26upx;
	font-weight: 600;
}
.price-box {
	.price-li {
		line-height: 80upx;
		.model-val {
			font-weight: 600;
		}
	}
}
.footer-view {
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	padding: 10upx 20upx;
	border-top: 1px solid #f4f4f4;
	line-height: 74upx;
	.float_left {
		font-size: 26upx;
		color: #999999;
		.rmb-icon {
			color: $price-color;
			margin-left: 20upx;
		}
		.price-num {
			font-weight: 500;
			font-size: 50upx;
		}
	}
	.sub-btn {
		height: 74upx;
		width: 204upx;
		border-radius: 10upx;
		line-height: 74upx;
		text-align: center;
		font-size: 28upx;
		color: #fff;
		background-color: #fe4543;
	}
}
.create-order {
	padding-bottom: 110upx;
}
.pay-pop-view {
	background-color: #ffffff;
	border-top-left-radius: 12upx;
	border-top-right-radius: 12upx;
	padding-bottom: 20upx;
	font-size: 28upx;
	.pay-sel-title {
		padding: 0 30upx;
		line-height: 88upx;
		font-weight: bold;
		font-size: 32upx;
		.ibonfont {
			color: #999;
			font-weight: 400;
		}
	}
	.pay-btn {
		width: 690upx;
		height: 70upx;
		line-height: 70upx;
		letter-spacing: 10upx;
		color: #fff;
		font-size: 28upx;
		text-align: center;
		margin: 20upx auto 0;
		border-radius: 12upx;
		background-color: $price-color;
	}
	.pay-ul {
		.pay-li {
			line-height: 100upx;
			.ibonfont {
				padding-left: 30upx;
				font-size: 46upx;
				vertical-align: middle;
				margin-right: 24upx;
			}
			.ibonweixinzhifu {
				color: #04be02;
			}
			.ibonumidd17 {
				color: #108ee9;
			}
			.ibonhuodaofukuan {
				color: #f2b844;
			}
			.pay-name {
				width: 650upx;
				display: inline-block;
				padding-right: 30upx;
				vertical-align: middle;
				border-bottom: 1px solid #f5f5f5;
				.ibonxuanze,
				.ibonweixuanze {
					margin-right: 0;
					padding-left: 0;
					font-size: 28upx;
					color: #666666;
				}
				.ibonxuanze {
					color: $price-color;
				}
			}
		}
	}
}
.self-shop-pop {
	background-color: #ffffff;
	border-top-left-radius: 12upx;
	border-top-right-radius: 12upx;
	padding-bottom: 20upx;
	font-size: 28upx;
	.self-shop-title {
		padding: 0 30upx;
		line-height: 88upx;
		font-weight: bold;
		font-size: 32upx;
		.ibonfont {
			color: #999;
			font-weight: 400;
		}
	}
	.self-shop-ul {
		padding: 0 20upx 30upx;
		.close-btn {
			width: 690upx;
			height: 70upx;
			line-height: 70upx;
			color: #fff;
			font-size: 28upx;
			letter-spacing: 10upx;
			text-align: center;
			margin: 20upx auto 0;
			border-radius: 10upx;
			background-color: $price-color;
		}
		.self-shop-li {
			font-size: 24upx;
			line-height: 36upx;
			padding: 30upx 80upx;
			border-bottom: 1px solid #f4f4f4;
			position: relative;
			.sel-tag {
				position: absolute;
				top: 50%;
				right: 20upx;
				transform: translateY(-50%);
				font-size: 28upx;
				color: #999999;
			}
			.ibonxuanze {
				color: $price-color;
			}
			.name {
				font-size: 28upx;
				padding-bottom: 10upx;
			}
			.icon-address {
				position: absolute;
				display: block;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 60upx;
				height: 60upx;
				line-height: 60upx;
				text-align: center;
				border-radius: 100%;
				font-size: 32upx;
				color: #ffffff;
				background-color: #fe4543;
			}
		}
	}
}

/* 优惠券列表 */
.self-coupon-pop {
	background-color: #f3f3f3;
	.cancel-coupon {
		font-size: 24upx;
		color: #666666;
	}
	.self-coupon-ul {
		height: 600rpx;
	}
	.coupon-item {
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;

		.con {
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;

			&:after {
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}

		.left {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}

		.time {
			font-size: 24upx;
			color: $font-color-light;
		}

		.right {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}

		.price {
			font-size: 44upx;
			color: $price-color;

			&:before {
				content: '￥';
				font-size: 34upx;
			}
		}

		.tips {
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}

		.circle {
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;

			&.r {
				left: auto;
				right: -6upx;
			}
		}
	}
}
</style>
